<script setup lang="ts">
import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus'
import { toRefs } from 'vue'

const props = withDefaults(defineProps<{
    detailData?: any
}>(), {
    detailData: {

    },
})
const { detailData } = toRefs(props)
</script>

<template>
    <div style="padding: 20px;">
        <ElDescriptions :title="detailData.title"
                        :column="3"
                        class="custom-label-alignment"
        >
            <template v-for="item in detailData.data"
                      :key="item.label"
            >
                <ElDescriptionsItem v-if="item.default === 'tag'"
                                    :label="item.label"
                                    :span="item.column"
                                    :width="item.width || 200"
                >
                    <ElTag v-if="item.text === '驳回'"
                           type="danger"
                    >
                        {{ item.text }}
                    </ElTag>

                    <ElTag v-else-if="item.text === '通过'"
                           type="success"
                    >
                        {{ item.text }}
                    </ElTag>

                    <ElTag v-else-if="item.text === '审批中'"
                           type="warning"
                    >
                        {{ item.text }}
                    </ElTag>
                </ElDescriptionsItem>

                <ElDescriptionsItem v-else-if="item.default === 'img'"
                                    :label="item.label"
                                    :span="item.column"
                                    :width="item.width || 300"
                >
                    <div style="display:flex;padding-left: 170px;">
                        <img v-for="img in item.text"
                             :key="img.url"
                             :src="img.url || img.response"
                             :alt="img.name"
                             style="margin-left: 10px;width: 170px;height: 170px;"
                        >
                    </div>
                    <!-- <img src="../../../../assets/imgs/avatar.jpg" alt=""> -->
                </ElDescriptionsItem>

                <ElDescriptionsItem v-else-if="item.default === 'remark'"
                                    class-name="remark"
                                    :label="item.label"
                                    :span="item.column"
                                    :width="item.width || 300"
                >
                    {{ item.text }}
                </ElDescriptionsItem>

                <ElDescriptionsItem v-else
                                    :label="item.label"
                                    :span="item.column"
                                    :width="item.width || 300"
                >
                    {{ item.text }}
                </ElDescriptionsItem>
            </template>
        </ElDescriptions>
    </div>
</template>

<style lang="scss" scoped>
:deep(.custom-label-alignment .el-descriptions__label) {
    display: inline-block;
    width: 155px;
    text-align: right !important;
}

:deep(.custom-label-alignment .remark) {
    display: inline-block;
    width: 800px;
    vertical-align: text-top;
}
</style>
